<template>
    <div class="base-page">
        <div class="base-page-nav">
            <div class="nav-title-prefix" :class="{ 'cursor-pointer': !forceDisabledBack && showDetail }" @click="handleBack">
                <svg viewBox="0 0 50 100" width="100%" height="23">
                    <defs>
                        <linearGradient id="nav-title-prefix-gradient" gradientTransform="rotate(90)">
                            <stop offset="0%" stop-color="#5062FF" />
                            <stop offset="100%" stop-color="#14C6B1" />
                        </linearGradient>
                    </defs>
                    <path
                        :class="['line-arrow', lineArrowClass]"
                        fill="none"
                        stroke="url(#nav-title-prefix-gradient)"
                        stroke-width="15"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                    </path>
                </svg>
            </div>
            <div class="nav-title">
                <slot name="navTitle">
                    {{ props.title }}
                </slot>
            </div>
        </div>
        <div class="base-page-main">
            <div class="main-left" v-if="slots.left">
                <slot name="left" />
            </div>
            <div class="main-right">
                <slot />
            </div>
            <transition name="el-fade-in">
                <div
                    class="base-page-detail"
                    v-if="showDetailDirective === 'if' ? showDetail : true"
                    v-show="showDetailDirective === 'show' ? showDetail : true"
                >
                    <div class="detail-content">
                        <slot name="detailContent" />
                    </div>
                    <div class="detail-operate" v-if="showDetailOperate">
                        <slot name="detailOperate">
                            <div class="default-detail-operate">
                                <el-button @click="handleBack">
                                    取消
                                </el-button>
                                <el-button type="primary" @click="handleSubmit">
                                    提交
                                </el-button>
                            </div>
                        </slot>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script setup>
import { computed, useSlots } from 'vue'

const props = defineProps({
    title: {
        type: String
    },
    showDetail: {
        type: Boolean,
        default: false
    },
    showDetailDirective: {
        type: String,
        default: 'if',
        validator: val => ['show', 'if'].includes(val)
    },
    showDetailOperate: {
        type: Boolean,
        default: true
    },
    forceDisabledBack: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['detailBack', 'detailSubmit'])

const slots = useSlots()

const handleBack = () => {
    if (props.forceDisabledBack) return
    if (!props.showDetail) return
    emit('detailBack')
}

const handleSubmit = () => {
    emit('detailSubmit')
}

const lineArrowClass = computed(() => {
    if (props.forceDisabledBack) return 'line'
    return props.showDetail ? 'arrow' : 'line'
})
</script>

<style lang="scss" scoped>
.base-page {
    --base-page-padding: 0 16px 16px 16px;
    --base-page-gap: 10px;
    --base-page-shadow: 0 0 5px rgb(0 0 0 / 8%);
    --base-page-main-bg-color: #f9fbfe;
    --left-padding: var(--base-page-gap);
    --right-bottom-bg-color: #fff;
    --right-bottom-box-shadow: var(--base-page-shadow);
    --right-bottom-padding: var(--base-page-gap);

    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;

    .base-page-nav {
        height: 50px;
        background-color: var(--base-page-main-bg-color);
        color: #0f2868;
        padding: 0 10px;
        display: flex;
        align-items: center;

        .nav-title-prefix {
            width: 20px;
            height: 26px;
            display: flex;
            align-items: center;
            margin-right: 1px;

            .line-arrow {
                transition: all 0.2s;
            }

            .line {
                d: path("M25,8 24.999,50 25,92");
            }

            .arrow {
                d: path("M35,8 15,50 35,92");
            }
        }

        .nav-title {
            display: inline-flex;
            font-size: 21px;
            font-weight: bold;
        }
    }

    .base-page-main {
        background-color: var(--base-page-main-bg-color);
        flex: 1 0;
        min-height: 0;
        display: flex;
        padding: var(--base-page-padding);
        gap: var(--base-page-gap);
        position: relative;

        .main-left {
            width: var(--base-page-left-width, 260px);
            background-color: #fff;
            box-shadow: var(--base-page-shadow);
            padding: var(--left-padding);
        }

        .main-right {
            flex: 1 0;
            min-width: 0;
            display: flex;
            flex-flow: column nowrap;
            gap: var(--base-page-gap);
            z-index: 0;
            overflow: auto;
        }

        .base-page-detail {
            position: absolute;
            z-index: 1;
            inset: 0;
            background-color: #f9f9f9;
            display: flex;
            flex-flow: column nowrap;

            .detail-content {
                padding: var(--base-page-padding);
                flex: 1 0;
                min-height: 0;
            }

            .detail-operate {
                height: 60px;
                background-color: #fff;
                box-shadow: var(--base-page-shadow);

                .default-detail-operate {
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding: var(--base-page-gap);
                }
            }
        }
    }
}
</style>